<template>
  <div class="ragular">
    <div class="rtop">
      <img v-on:click="$router.go(-1)" src="./../assets/return.png" alt="" />
      游戏规则
    </div>
    <div class="rCon">
      <div class="rcBox">
        <div class="rtitle">ⅰ.模式说明</div>
        <div class="rcCon">
          <div class="title">
            <span>经典模式</span><img src="./../assets/round.png" alt="" />
          </div>
          <p>
            在此模式下,玩家要以最快的速度完成指定数目个黑块儿,当玩家点错了色块儿或者点完50个色块儿时,游戏宣告结束,同时记录玩家当前所用的时间。
          </p>
        </div>
        <div class="rcCon">
          <div class="title">
            <span>街机模式</span><img src="./../assets/round.png" alt="" />
          </div>
          <p>在此模式下,滑块自动下落,同时速度随着分数增加而提高,当玩家点错了色块儿或者滑块触底时,游戏宣告结束,同时记录玩家当前的分数。</p>
        </div>
        <div class="rcCon">
          <div class="title">
            <span>极速模式</span><img src="./../assets/round.png" alt="" />
          </div>
          <p>在此模式下,滑块自动下落,但初始速度很快,同时速度随着分数增加而提高,当玩家点错了色块儿或者滑块触底时,游戏宣告结束,同时记录玩家当前的分数。</p>
        </div>
        <div class="rcCon">
          <div class="title">
            <span>限时模式</span><img src="./../assets/round.png" alt="" />
          </div>
          <p>在此模式下,玩家要以最快的速度点击黑块儿,当玩家点错了色块儿或者游戏进行20秒时,游戏宣告结束,同时记录玩家当前的分数</p>
        </div>
      </div>
      <div class="rcBox">
        <div class="rtitle">ⅱ.计分规则</div>
        <div class="rcCon">
          <div class="title">经典模式</div>
          <p>玩家点击50个黑块所用的时间，即为游戏分数</p>
          <div class="title">街机模式</div>
          <p>玩家累计点击的黑块数即为游戏分数</p>
          <div class="title">限时模式</div>
          <p>玩家累计点击的黑块数即为游戏分数</p>
          <div class="title">极速模式</div>
          <p>玩家累计点击的黑块数即为游戏分数</p>
        </div>
      </div>
      <div class="rcBox">
        <div class="rtitle">ⅲ.排名规则</div>
        <div class="rcCon">
          <div class="title">经典模式</div>
          <p>用时越少则排名越靠前</p>
          <div class="title">街机模式</div>
          <p>分数越高则排名越靠前</p>
          <div class="title">限时模式</div>
          <p>分数越高则排名越靠前</p>
          <div class="title">极速模式</div>
          <p>分数越高则排名越靠前</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ragular {
  text-align: left;
  padding: 20px;
  .rtop {
    box-sizing: border-box;
    margin: 0;
    font-size: 22px;
    img {
      width: 30px;
      margin: 0 10px 0px 0px;
      display: inline-block;
    }
  }
  .rCon {
    .rcBox {
      padding: 20px 0 0px;
      .rtitle {
          margin-bottom: 10px;
      }

      .rcCon {
        p {
          letter-spacing: 2px;
          line-height: 25px;
        }
        .title {
          line-height: 40px;
          font-size: 18px;    
          display: flex;  
          justify-content: space-between;
          img {
        width: 40px;
        display: inline-block;
        margin-left: 10px;
        animation: round 2s linear infinite;
      }
      @keyframes round {
          from{
        transform: rotateX(0deg);

          }
          to{
        transform: rotateX(180deg);

          }
      }
        }
      }
    }
  }
}
</style>